<template>
  <div class="edit-content">
    <div class="editbtn" v-if="isAdmin">
      <el-button type="primary" @click="open">新增</el-button>
    </div>
    <div class="user-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-background="#0a1568"
        style="width: 100%"
      >
        <el-table-column
          label-class-name="columnUser"
          class-name="columnUser"
          width="320"
          align="center"
          prop="fieldName"
          label="值"
        />
        <el-table-column
          label-class-name="columnUser"
          class-name="columnUser"
          align="center"
          prop="formulaStr"
          label="公式"
        />
        <el-table-column
          label-class-name="columnUser"
          class-name="columnUser"
          width="200"
          align="center"
          label="操作"
          v-if="isAdmin"
        >
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              :title="`确定删除 ${scope.row.fieldName} 吗？`"
              @confirm="deleteOne(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                style="color: red"
                size="small"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template>
      <el-dialog
        :title="rowData.id ? '编辑' : '新增'"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        custom-class="userdialog"
        width="90%"
      >
        <Edit v-model="content" :rowData="rowData" ref="child" />
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogVisible = false;
              rowData = {};
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="save" :loading="dialogLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import Edit from "./Edit.vue";
import {
  listApi,
  updateByIdApi,
  formulaListApi,
  formulaCreateApi,
  formulaFieldsApi,
  formulaOperatorsApi,
  formulaDeleteApi,
  formulaUpdateApi,
} from "@/api/config";
export default {
  components: {
    Edit,
  },
  data() {
    return {
      content: "",
      id: null,
      userInfo: {},
      rowData: {
        // id: null
      },
      loading: false,
      dialogVisible: false,
      dialogLoading: false,
      tableData: [],
      isAdmin: false,
    };
  },
  created() {
    this.init();
    const userInfo = localStorage.getItem("userInfo")
      ? JSON.parse(localStorage.getItem("userInfo"))
      : {};
    this.userInfo = userInfo;
    this.isAdmin = userInfo.roleName && userInfo.roleName.includes("管理员");
  },
  mounted() {},
  methods: {
    open() {
      this.dialogVisible = true;
      this.rowData = {};
    },
    edit(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.rowData = row;
      });
    },
    async deleteOne(row) {
      console.log(row, "deleteOne");
      const res = await formulaDeleteApi(row.id);
      console.log(res, "res--");

      // if (res.success) {
      this.$message({
        message: `删除成功!`,
        type: "success",
      });
      // }else{
      //     this.$message({
      //     message: `删除失败!`,
      //     type: "error",
      //   });
      // }

      this.init();
    },
    rowClass({ row }) {
      return "column200";
    },
    async init() {
      // const res1 = await formulaFieldsApi()
      // const res2 = await formulaOperatorsApi()
      this.loading = true;
      const res3 = await formulaListApi();
      this.tableData = res3;
      this.loading = false;
      // this.id = res.id
      // this.content = res.value
    },
    async save() {
     
      const obj = await this.$refs.child.submitForm();
      console.log(obj,'obj-------------333');
      if (!obj) {
        return
      }
       this.dialogLoading = true;
      if (this.rowData.id) {
            const res = await formulaUpdateApi(obj);
            if (res.id) {
                this.dialogVisible = false;
              this.$message({
                message: `修改成功!`,
                type: "success",
              });
            } else {
              this.$message({
                message: `修改失败!`,
                type: "error",
              });
            }
          } else {
            const res = await formulaCreateApi(obj);
            console.log(res,'res====');
            
            if (res.field) {
                this.dialogVisible = false;
              this.$message({
                message: `保存成功!`,
                type: "success",
              });
            } else {
              this.$message({
                message: `保存失败!`,
                type: "error",
              });
            }
          }
          this.dialogLoading = false;
      // const res = await updateByIdApi({id: this.id, value: this.content})
      this.init();
      // console.log(this.content, 'content');
      // this.$message({
      //   message: `保存成功!`,
      //   type: "success",
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
// :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
//     border-bottom: 1px solid rgba(102, 255, 255, 0.2) !important;
//   }
.user-table {
    border-radius: 4px;
    border: 2px solid #0d53b7;
    border-radius: 4px;
   
  :deep(.columnUser) {
    background: #0a1568;
    border-color: rgba(102, 255, 255, 0.2) !important;
    // border-bottom: 1px solid rgba(102, 255, 255, 0.2) !important;
    padding-left: 2px;
    padding-right: 2px;
    color: #ffffff;
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background: rgba(14, 95, 254, 1);
    color: #ffffff;
  }
  
  :deep(.el-table::before) {
    background-color: #0a1568;
  }
  :deep(.el-table__fixed-right::before) {
    background-color: #0a1568;
  }
  :deep(.el-table__empty-block) {
    background-color: #0a1568;
  }
}

.edit-content {
  padding: 16px;
  .editbtn {
    margin: 16px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
